<template>
  <el-card>
    <BreadCrumb />
    <el-row>
      <el-col :span="8">
        <el-input v-model="queryInfo.username" placeholder="请输入教师姓名">
          <el-select slot="prepend" v-model="queryInfo.roleId" clearable placeholder="请选择角色" @change="getTeacherList">
            <el-option
              v-for="item in roleNameList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            />
          </el-select>
          <template #append>
            <el-button icon="el-icon-search" @click="getTeacherList" />
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-table
      :data="teacherList"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center' }"
      style="width: 100%"
      stripe
      border
      highlight-current-row
    >
      <el-table-column label="教师工号" min-width="10%">
        <template slot-scope="scope">
          <span>{{ scope.row.teacherId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="教师姓名" min-width="25%">
        <template slot-scope="scope">
          <span>{{ scope.row.username }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" min-width="25%">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色名称" min-width="25%">
        <template slot-scope="scope">
          <span>{{ scope.row.roleName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" min-width="25%">
        <template slot-scope="scope">
          <span>{{ scope.row.gmtCreate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否禁用" min-width="25%">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.disabled" type="info">
            已禁用
          </el-tag>
          <el-tag v-else type="success">
            正常使用
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="25%"
      >
        >
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑教师" placement="top">
            <el-button size="mini" type="warning" :disabled="scope.row.teacherId === '001' ? true : false" icon="el-icon-edit" @click="handleEditTeacher(scope.row.id)" />
          </el-tooltip>
          <el-tooltip effect="dark" content="修改密码" placement="top">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-lock"
              @click="showEditPasswordDialog(scope.row.id)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除教师" placement="top">
            <el-button
              size="mini"
              type="danger"
              :disabled="scope.row.teacherId === '001'"
              icon="el-icon-delete"
              @click="deleteTeacher(scope.row.id)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :query-info="queryInfo"
      :page-sizes="pageSizes"
      :total="total"
      @pageChanged="getTeacherList"
    />
    <el-dialog
      title="修改密码"
      :visible.sync="updatePasswordDialogVisible"
      width="20%"
      @close="handleDialogClose"
    >
      <el-form ref="FormRef" :model="form" :rules="FormRules">
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            show-password
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取 消</el-button>
        <el-button type="primary" @click="updatePassword()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb'
import Pagination from '@/components/Pagination'
import { isConfirm } from '@/utils/confirm'
import { checkAuth } from '@/utils/checkAuth'
import { getTeacherListByPage, deleteTeacher, updatePassword } from '@/api/teacherApi'
import { getRoleNameList } from '@/api/roleApi'
export default {
  components: {
    BreadCrumb,
    Pagination
  },
  data() {
    return {
      // 教师列表数据
      teacherList: [],
      // 控制更新密码对话框的显示与隐藏
      updatePasswordDialogVisible: false,
      // 新密码表单
      form: {
        password: ''
      },
      // 新密码表单验证规则
      FormRules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 10,
            message: '长度在 6~10 个字符之间',
            trigger: 'blur'
          }
        ]
      },
      // 要修改密码的教师 id
      teacherId: '',
      // 分页获取列表参数
      queryInfo: {
        username: '',
        roleId: '',
        pagenum: 1,
        pagesize: 2
      },
      // 页面大小数组
      pageSizes: [1, 2, 5, 10],
      // 页面总数
      total: 0,
      // 下拉框角色数据
      roleNameList: []
    }
  },
  created() {
    // 获取下拉框角色信息数据
    this.getRoleNameList()
    // 获取教师列表数据
    this.getTeacherList()
  },
  methods: {
    // 获取教师列表数据
    async getTeacherList() {
      const { data: res } = await getTeacherListByPage(this.queryInfo)
      this.teacherList = res.teacherList
      this.total = res.total
    },
    // 获取角色名称信息数据
    async getRoleNameList() {
      const { data: res } = await getRoleNameList()
      this.roleNameList = res.roleNameList
    },
    // 编辑按钮点击
    async handleEditTeacher(id) {
      if (!await checkAuth('编辑教师')) return
      this.$router.push('/teacher/edit/' + id)
    },
    // 删除按钮点击
    async deleteTeacher(id) {
      if (!await checkAuth('删除教师')) return
      // 删除确认
      if (await isConfirm('此操作将永久删除该教师，是否删除？')) {
        await deleteTeacher(id)
        this.$message.success('删除成功')
        // 重新获取数据
        this.getTeacherList()
      }
    },
    // 修改密码点击
    async showEditPasswordDialog(id) {
      if (!await checkAuth('修改密码')) return
      this.teacherId = id
      this.updatePasswordDialogVisible = true
    },
    // 对话框关闭
    handleDialogClose() {
      // 重置表单
      this.$refs.FormRef.resetFields()
      this.updatePasswordDialogVisible = false
    },
    // 修改密码
    updatePassword() {
      // 表单验证
      this.$refs.FormRef.validate(async valid => {
        if (!valid) return
        // 更新确认
        if (await isConfirm('是否修改该教师的密码')) {
        // 发送请求修改
          await updatePassword(this.teacherId, this.form.password)
          this.$message.success('修改成功')
          // 关闭对话框
          this.updatePasswordDialogVisible = false
        }
      })
    }
  }
}
</script>

<style scoped>
.el-table{
  font-size: 16px;
  margin-bottom: 25px;
}
.el-table__row span {
  margin-left: 10px
}
.el-card{
  min-height:95%;
}
.el-input /deep/ .el-input-group__prepend{
  width: 30%;
}
.el-row {
  margin-bottom: 25px;
}
</style>
